<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common/common_head :: commonHead('demo')"></head>
</head>
<body class="layui-container">
<div class="x-body" style="margin: 20px auto;">
    <form class="layui-form layui-form-pane" style="margin-left: 10px;" onsubmit="return false" >
        <div class="layui-form-item">
            <label  class="layui-form-label">属性名</label>
            <div class="layui-input-block">
                <input type="text" name="propertyName" autocomplete="off" class="layui-input"  />
            </div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男"/>
                <input type="radio" name="sex" value="女" title="女" checked="true"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-inline">
                <input type="checkbox" name="switch" lay-skin="switch" lay-text="正常|停用"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="写作"/>
                <input type="checkbox" name="like[read]" title="阅读" checked="true"/>
                <input type="checkbox" name="like[dai]" title="发呆"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">时间框</label>
            <div class="layui-input-block">
                <input type="text" id="date" autocomplete="off" class="layui-input"  />
            </div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label">文件上传</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>上传附件
                </button>
            </div>
            <div class="layui-form-mid layui-word-aux">支付PDF、Word</div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label" style="display: inline-block; height: 100px; padding-top: 40px">文本域</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript" th:inline="javascript"> /*<![CDATA[*/
layui.use(['form','layer','upload','laydate'], function(){
    var upload = layui.upload,form = layui.form  ,layer = layui.layer;
    layui.laydate.render({  id:"date", elem:"#date"});
    //执行实例
    var uploadUrl = /*[[@{/auto/upload}]]*/ "/auto/upload";
    var uploadInst = upload.render({
         elem: '#test1' //绑定元素
        ,url: uploadUrl //上传接口
        ,accept:'file'  //上传支持文件类型 images（图片）、file（所有文件）、video（视频）、audio（音频）
        //规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表
        //,acceptMime:'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        //允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: 'zip|rar|7z'
        //即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式
        ,exts:'pdf|doc|docx'
        //扩展请求参数 fieldName : 文件域参数名,  accept: 服务器上传文件分类 file（默认所有文件）、images（图片）、video（视频）、audio（音频）
        ,data:{fieldName:'file', accept:'file'}
        ,field:'file' //设定文件域的字段名
        ,drag:true //接受拖拽的文件上传
        ,size:10240 //设置文件最大可允许上传的大小，单位 KB。不支持ie8/9
        ,before: function(obj){ //obj参数包含的信息
            layer.load(); //上传loading
        }
        ,done: function(res, index, upload){
            //上传完毕回调
            layer.closeAll('loading'); //关闭loading
            if(res.code == 'fail'){
                layuiUtils.toastMsg({content: "上传失败, 原因:" + res.msg,icon:'fail', anim:'fail'});
            }else{
                /**
                 *  上传成功 返回上传结果数组
                 *  [{
                     *     extName: 上传文件后缀名,
                     *     originName: 上传文件原始文件名,
                     *     size: 上传文件大小 单位字节,
                     *     url: 上传文件在服务器上的URL
                     *  },{}]
                 */
                console.dir(res.data);
            }
        },error: function(index, upload){
            //请求异常回调
            layer.closeAll('loading'); //关闭loading
        }
    });

    form.render();
});
/*]]>*/</script>
</body>
</html>
